
.control-toggler {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding-left: 1px; // for negative left margin of children
  font-size: $control-font-size;
}

.control-toggler__choice {
  @include control-focus-border;
  position: relative;
  z-index: 2;
  margin-left: -1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border: 1px solid $control-border-color;
  padding: $control-v-padding $control-h-padding;
  line-height: $control-line-height;
  cursor: pointer;
  display: flex;
  align-items: center;

  &:first-child {
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
  }

  &:last-child {
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }

  img { // hack for completely-white 18x18 icons
    opacity: .5;
  }
}

.control-toggler__choice--selected {
  z-index: 1; // put below other items
  background: $control-fill-color;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
}
